<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <style>
      body {
        text-align: center;
        margin: 0;
        padding: 0;
      }
      nav ul {
        list-style: none;
        display: flex;
        width: 984px;
        height: 40px;
        margin: 0 auto;
        line-height: 40px;
        position: relative;
        padding: 0;
      }
      header {
        width: 100%;
        height: 50px;
        background-color: lightsalmon;
      }
      nav {
        width: 100%;
        background-color: #01204f;
        font-size: 14px;
        transition: all 2s;
      }
      nav li {
        z-index: 9999;
      }
      nav li span {
        /* display: block; */
        color: #fff;
        cursor: pointer;
        font-weight: 800;
        padding: 0 10px;
      }
      nav .img {
        background: url("img/小屋子.png") no-repeat;
        width: 6px;
        height: 7px;
        padding: 0 10px 0 30px;
      }
      nav .box {
        background-color: red;
        position: absolute;
        height: 40px;
        top: 0;

        transition: all 1s;
        overflow: hidden;
        /* opacity: 0.5; */
        z-index: 1;
      }

      ul {
        list-style: none;
      }
      .side {
        position: fixed;
        left: 60%;
        bottom: 30px;
      }
      .erweima {
        background: url("./img/icon-merged_b8bc211.png") no-repeat 0 0;
        width: 48px;
        height: 48px;
      }
      .star {
        background: url("img/icon-merged_b8bc211.png") no-repeat 0 -51px;
        width: 48px;
        height: 48px;
      }
      .search {
        background: url("img/icon-merged_b8bc211.png") no-repeat 0 -204px;
        width: 48px;
        height: 48px;
      }
      .top {
        background: url("img/icon-merged_b8bc211.png") no-repeat 0 -306px;
        width: 48px;
        height: 48px;
      }
      .wen {
        background: url("img/icon-merged_b8bc211.png") no-repeat 0 -255px;
        width: 48px;
        height: 48px;
      }
      .side-list {
        transform: translateY(94);
      }
      .side-list .side-item {
        position: relative;
        margin-top: 5px;
        transition: all 1s;
        overflow: hidden;
      }

      .side-item .inner {
        position: absolute;
        left: 0;
        right: 0;
        width: 100px;
        height: 100px;
      }
      .side-list .top:hover {
        background: url("img/icon-merged_b8bc211.png") no-repeat 0 -357px;
        width: 48px;
        height: 48px;
      }
      .side-list .rotate {
        width: 48px;
        height: 92px;
      }
      .side-list span {
        position: absolute;
        background-color: #18448e;
        color: #fff;
        left: 0;
        bottom: 0;
        font-size: 12px;
        width: 48px;
        height: 48px;
        z-index: 9;
        text-align: center;
        transform-origin: 0 100%;
        transform: rotate(180deg);
      }
      .side-list .side-item:hover span {
        transform-origin: 0 100%;
        transform: rotate(0);
        transition: all 0.5s;
      }
      nav ul li .active {
        background-color: #cc0000;
      }
    </style>
  </head>
  <body>
    <header>头部</header>
    <nav>
      <ul>
        <div class="box"></div>
        <li style="background-color: #cc0000;">
          <span class="img">首页</span>
        </li>
        <li><span>国内</span></li>
        <li><span>国际</span></li>
        <li><span>军事</span></li>
        <li><span>财经</span></li>
        <li><span>娱乐</span></li>
        <li><span>体育</span></li>
        <li><span>互联网</span></li>
        <li><span>科技</span></li>
        <li><span>游戏</span></li>
        <li><span>女人</span></li>
        <li><span>汽车</span></li>
        <li><span>房产</span></li>
      </ul>
    </nav>
    <div>
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
      <p>7</p>
      <p>8</p>
      <p>9</p>
      <p>10</p>
      <p>11</p>
      <p>12</p>
      <p>13</p>
      <p>14</p>
      <p>15</p>
      <p>16</p>
      <p>17</p>
      <p>18</p>
      <p>19</p>
      <p>20</p>
      <p>21</p>
      <p>22</p>
      <p>23</p>
      <p>24</p>
      <p>25</p>
      <p>26</p>
      <p>27</p>
      <p>28</p>
      <p>29</p>
      <p>30</p>
      <p>31</p>
      <p>32</p>
      <p>33</p>
      <p>34</p>
      <p>35</p>
      <p>36</p>
      <p>37</p>
      <p>38</p>
      <p>39</p>
      <p>40</p>
      <p>41</p>
      <p>42</p>
      <p>43</p>
      <p>44</p>
      <p>45</p>
      <p>46</p>
      <p>47</p>
      <p>48</p>
      <p>49</p>
      <p>50</p>
      <p>51</p>
      <p>52</p>
      <p>53</p>
      <p>54</p>
      <p>55</p>
      <p>56</p>
      <p>57</p>
      <p>58</p>
      <p>59</p>
      <p>60</p>
    </div>
    <main>
      <div class="side">
        <ul class="side-list">
          <li class="side-item">
            <img src="./img/report_02cdef2.png" alt="" />
            <span class="rotate">举报</span>
          </li>
          <li class="side-item">
            <div class="erweima"></div>
            <span>二维码</span>
          </li>
          <li class="side-item">
            <div class="star"></div>
            <span>收藏本站</span>
          </li>
          <li class="side-item">
            <div class="search"></div>
            <span>搜索</span>
          </li>
          <li class="side-item">
            <div class="wen"></div>
            <span>用户反馈</span>
          </li>
          <li class="side-item" id="top">
            <div class="top"></div>
          </li>
        </ul>
      </div>
    </main>

    <script>
      var nav = document.querySelector("nav");
      var sidelist = document.querySelector(".side-list");
      window.onscroll = function() {
        var screenTop = document.documentElement.scrollTop;
        if (screenTop >= 120) {
          console.log("nav 固定");
          //给导航设置固定
          nav.style.position = "fixed";
          nav.style.top = 0;
          sidelist.style.transform = "translateY(0)";
        } else {
          // 当跟随时，设置nav static
          nav.style.position = "static";
          nav.style.top = -nav.offsetHeight + "px";
          sidelist.style.transform = "translateY(94px)";
        }
      };

      var div = document.querySelector(".box");
      var lis = document.querySelectorAll("nav li");
      // var index = 0;
      var lastindex = 0;
      var widths;
      var lefts;
      for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;
        console.log(lis);
        lis[i].onmouseenter = function() {
          widths = this.clientWidth;

          lefts = this.offsetLeft;
          div.style.width = widths + "px";
          //   div.style.left = lefts + "px";
          div.style.transform = "translate(" + lefts + "px)";
          console.log(lefts);
        };

        lis[i].onclick = function() {
          // 清空上一个li标签的背景
          lis[lastindex].className = "";
          // 点击添加类名，添加红色背景
          this.className = "active";

          // 只有当点击的时候才能改变active位置，此时才能重新记录lastindex的值
          lastindex = this.index;
        };

        lis[i].onmouseleave = function() {
          lefts = 0;
          div.style.transform = "translate(" + lefts + "px)";
          console.log(lefts);
        };
      }
    </script>
  </body>
</html>
